<template>
	<view style="background: #EEEEEE;">
		<view class="question-content">
			<view class="count-down" v-show="timeStamp.isFinish == false">
				距离活动结束还有：
				<view>{{timeStamp.day}}</view>天
				<view>{{timeStamp.hour}}</view>时
				<view>{{timeStamp.min}}</view>分
				<view>{{timeStamp.seconds}}</view>秒
			</view>
			<view class="count-down" v-show="timeStamp.isFinish == true">
				<view>活动已结束</view>
			</view>
			<view class="activity-statistics">
				<view>
					<view>{{currentData.voter}}</view>
					<view>累计提交量</view>
				</view>
				<view>
					<view>{{currentData.voter}}</view>
					<view>累计参与人数</view>
				</view>
			</view>
			<view class="activity-time">
				活动开始时间：{{$funcs.toLocalTime(currentData.startTime)}}
			</view>
			<view class="activity-time">
				活动结束时间：{{$funcs.toLocalTime(currentData.endTime)}}
			</view>
		</view>
		<view class="question-content">
			<view class="question-tip">
				{{currentData.activityContent ? currentData.activityContent : activityContent}}
			</view>
			<view class="question-form" v-if="questionList.length > 0">
				<form>
					<view class="uni-form-item uni-column question-form-item" v-for="(item,index) in questionList"
						:key="index">
						<view v-if="item.type == 'radio'">
							<view class="question-form-title">
								<view v-if="item.required == true" style="color:red;">*</view>
								<view>{{index +1+'、'+item.label+'：'}}</view>
							</view>
							<radio-group name="radio" v-for="(o,i) in item.options" :key="item.key"
								@change="radioChange($event,item.options)"
								:class="item.layout == 'across' ? 'option-across':'option-vertical'">
								<label class="question-form-label" :class="o.label === ('其他' || '其它' ) ? 'other':''">
									<radio :value="o.label" :checked="o.checked" color="#2D9FFB"
										style="transform:scale(0.7);" />
									<text style="margin-right: 20rpx;">{{o.label}}</text>
									<uni-easyinput v-show="o.label === ('其他' || '其它' )"
										@input="inputChage($event,item.options)" :value="o.otherText"></uni-easyinput>
								</label>
							</radio-group>
						</view>

						<view v-if="item.type == 'checkbox'">
							<view class="question-form-title">
								<view v-if="item.required == true" style="color:red;">*</view>
								<view>{{index +1+'、'+item.label+'：'}}</view>
							</view>
							<checkbox-group name="checkbox" v-for="(o,i) in item.options" :key="i"
								@change="checkboxChange($event,item.options,i,questionList[index])"
								:class="item.layout == 'across' ? 'option-across':'option-vertical'">
								<label class="question-form-label" :class="o.label === ('其他' || '其它' ) ? 'other':''">
									<checkbox :value="o.label" color="#2D9FFB" style="transform:scale(0.7);" />
									<text style="margin-right: 20rpx;">{{o.label}}</text>
									<uni-easyinput v-show="o.label === ('其他' || '其它' )"
										@input="inputChage($event,item.options)" ></uni-easyinput>
								</label>
							</checkbox-group>
						</view>
						<view v-if="item.type == 'select'">
							<view class="question-form-title">
								<view v-if="item.required == true" style="color:red;">*</view>
								<view>{{index +1+'、'+item.label+'：'}}</view>
							</view>
							<picker :value="item.pickerIndex" :range="item.options.map(x=>x.label)" style="width: 100%;"
								@change="pickerChange($event,item.options,item)" class="picker-option">
								<view class="placeHolder " v-if="item.pickerIndex < 0">
									{{item.placeholder}}
								</view>
								<view style="width:100%" v-else>{{item.options[item.pickerIndex].label }}</view>

							</picker>
						</view>
						<view v-if="item.type == 'rate'">
							<view class="question-form-title">
								<view v-if="item.required == true" style="color:red;">*</view>
								<view>{{index +1+'、'+item.label+'：'}}</view>
							</view>
							<view style="display: flex;align-items: center;">
								<uni-rate v-model="item.stars" @change="rateChange($event,item)" :max="item.count">
								</uni-rate>
								<view class="rate-tip" v-if="item.starTip">{{item.starTip}}</view>
							</view>
							<view class="uni-textarea" >
								<textarea @input="textareaChange($event,item)" class="textarea-content" :placeholder="item.textLPlaceholder"></textarea>
							</view>
							
						</view>
					</view>
					<view style="display: flex;justify-content: center;" v-if="currentData.status !== 2">
						<button form-type="submit" class="btn-submit" @click="formSubmit"
							v-if="currentData.isVoted==false&&timeStamp.isFinish == false">立即提交</button>
						<button form-type="submit" class="btn-submit disabled-btn"
							v-if="currentData.isVoted==true || timeStamp.isFinish == true">立即提交</button>
					</view>
				</form>
			</view>

		</view>
		
		<view class="question-content">
			<comment ref="comment"></comment>
		</view>
		
	</view>

</template>

<script>
	import comment from '../comment/comment.vue'
	export default {
		components:{comment},
		data() {
			return {
				id: null,
				currentData: {}, //当前活动列表数据
				activityContent: '为了更好的服务居民，提高良好的安全保障、细致的服务！我们社区真诚的希望您可以参与以下调研内容，为我们提供宝贵的意见。',
				timeStamp: {}, //倒计时时间
				currentInfo: {}, //当前活动详情数据
				questionList: [], //问题
				submitData: {},
				rateValue: 0,
				pickerIndex: -1,
				radioCurrent: -1,
				checkboxCurrent: -1,

			}
		},
		onLoad(option) {
			this.id = parseInt(option.id)
			this.getQuestionInfo(this.id)
			// this.$refs.comment.getCommentList(this.id)
			this.$refs.comment.getActivityInfo(this.id)
			this.getDataList(this.id)
			// this.getActivityInfo(this.id)
			
			console.log(option)
		},
		methods: {
			radioChange(e, list) {
				list && list.forEach(x => {
					// console.log(x.label)
					if (x.label == e.detail.value) {
						x.checked = true

					} else {
						x.checked = false
					}
					// if(e.detail.value !== ('其他' || '其它')){
					// 	x.otherText = null
					// }
				})
				console.log(list)

			},
			inputChage(e, list) {
				// console.log(e, list,'11111111111')
				list && list.forEach(x => {
					if (x.label == ('其他' || '其它')) {
						x.otherText = e
					}
				})
				console.log(list,'123')
			},
			textareaChange(e, obj) {
				console.log(e, obj)
				obj.starsText = e.detail.value
			},
			checkboxChange(e, list, index, obj) {
				console.log(e.detail.value,list, index, obj,'复选框内容')
				let checkedList = []
				list && list.forEach(x => {
					if (e.detail.value.length > 0) {
						
						if (x.label == e.detail.value[0]) {
							if (x.checked) {
								x.checked = false
							} else {
								x.checked = true
							}
							
						}
					} else {
						list[index].checked = false
					}
				})
				console.log(list,'444')
				checkedList = list && list.filter(x => x.checked == true)
				console.log(checkedList)
			},
			pickerChange(e, list, item) {
				list && list.forEach((x, i) => {
					if (i == e.detail.value) {
						x.checked = true
						// x.pickerIndex = parseInt(e.detail.value)
					} else {
						x.checked = false
					}

				})
				// console.log(e.detail.value)
				console.log(list)
				item.pickerIndex = parseInt(e.detail.value)
				console.log(item)
			},
			rateChange(e, obj) {
				console.log(obj)
				console.log(e.value)
				obj.stars = e.value

				obj.starTip = obj.tooltips[e.value - 1]
				console.log(obj)
				this.rateValue = e.value
			},
			getDataList(id) {
				let currentId = id
				this.$http.post('vx/activity/list', {
					projectId: uni.getStorageSync('projId'),
					activityType: 2,
					status: this.count,
					pagination: {
						"pageSize": 1000,
						"current": this.current
					},
					sorter: {
						"field": "id",
						order: 0
					}
				}).then(
					res => {
						uni.stopPullDownRefresh();
						if (res.code == 10000) {
							let list = res.data.list || []
							let obj = list && list.find(x => x.id == currentId)
							this.currentData = obj
							// 设置截止时间
							let endDate = new Date(obj.endTime) //需要倒计时的日期
							let end = endDate.getTime()
							setInterval(() => {
								// 获取当前时间
								let date = new Date()
								let now = date.getTime()
								// 计算时间戳差值
								let leftTime = end - now
								this.timeStamp = this.$funcs.getFormateTimeStamp(leftTime)
							}, 1000)
							console.log(this.timeStamp)
							console.log(this.currentData)
						}
					}
				)

			},
			getQuestionInfo(id) {
				uni.showLoading({
					title: "加载中"
				})
				this.$http.post('activity/questionnaire/info', {
					activityId: id
				}).then(
					res => {
						if (res.code === 10000) {
							let list = []
							this.currentInfo = res.data
							this.currentInfo.list && this.currentInfo.list.forEach(x => {
								let obj = JSON.parse(x.config)
								x.obj = obj
								obj.id = x.id
								obj.pickerIndex = -1
								obj.options && obj.options.forEach(x => x.checked = false)
								list.push(obj)
							})
							this.questionList = list
							console.log(this.questionList)
							console.log(this.currentInfo)
						}
					})
			},
			formSubmit() {
				let hasRadioAndSelect = true
				let hasCheckbox = true //判断复选框选择的个数是否在min和max之间
				let hasRate = true
				let isCorrect = true
				let correctNumList = []
				console.log(this.questionList)
				this.questionList && this.questionList.forEach((item, index) => {

					if (item.required == true) {
						let boolList = []
						boolList = item.options && item.options.map(x => x.checked)
						if (item.type == 'radio' || item.type == 'select') {
							if (!boolList.includes(true)) {
								uni.showToast({
									title: `还有题目未答！`,
									icon: 'none'
								})
								hasRadioAndSelect = false
							} else {
								hasRadioAndSelect = true
							}
						}
						if (item.type == 'checkbox') {
							let checkedList = []
							checkedList = item.options && item.options.filter(x => x.checked == true)
							if (item.max || item.min) {
								if (item.max && checkedList.length > item.max) {
									uni.showToast({
										title: `第${index+1}题选择过多，最多选取${item.max}项`,
										icon: 'none'
									})
									item.correctNum = false
								} else if (item.min && checkedList.length < item.min) {
									uni.showToast({
										title: `第${index+1}题选择过少，至少选取${item.min}项`,
										icon: 'none'
									})
									item.correctNum = false
									
								} else {
									item.correctNum = true
								}
							} else {
								if (!boolList.includes(true)) {
									uni.showToast({
										title: `还有题目未答！`,
										icon: 'none'
									})
									hasCheckbox = false
								} else {
									hasCheckbox = true
								}
							}
							correctNumList =  this.questionList && this.questionList.map(x => x.correctNum)
							
							if(correctNumList.includes(false)){	
								isCorrect = false
							}else{
								isCorrect = true
							}
						}

						console.log(item)
						if (item.type == 'rate') {
							console.log(item.stars)
							if (!item.stars || item.stars == 0) {
								uni.showToast({
									title: `还有题目未答！`,
									icon: 'none'
								})
								hasRate = false
							} else {
								hasRate = true
							}
						}
					}
				})
				let list = []
				this.questionList && this.questionList.forEach(item => {
					let obj = {}
					let optionIdx = []
					obj.id = item.id
					obj.stars = item.stars ? item.stars : 0
					obj.starsText = item.starsText ? item.starsText : ''
					obj.label = item.label

					item.options && item.options.forEach((x, i) => {
						if (x.checked == true) {
							optionIdx.push(i + 1)
							obj.otherText = x.otherText ? x.otherText : ''

						}
					})
					obj.optionIdx = optionIdx
					list.push(obj)
				})
				let values = {
					activityId: this.id,
					projId: uni.getStorageSync('projId'),
					list: list
				}
				console.log(values)
				if (hasRadioAndSelect && hasCheckbox && hasRate &&isCorrect) {
					this.$http.post('activity/questionnaire/submit', values).then(res => {
						if (res.code == 10000) {
							uni.showModal({
								title: "提交成功",
								showCancel: false,
								// success: () => {
								// 	uni.redirectTo({
								// 		url: "../questionnaireList/questionnaireList"
								// 	})
								// }
							})
						} else {
							uni.showModal({
								title: res.msg,
								showCancel: false,

							})
						}
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.question-content {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.count-down {
		border: 1rpx solid #F4EBEB;
		text-align: center;
		padding: 15rpx 0;
		box-shadow: 0 1rpx 4rpx 0 rgba(226, 216, 205, 0.5);
		border-radius: 12rpx;
		color: #585858;

		view {
			display: inline-block;
			color: #F61515;
			font-size: 1.4em;
			padding: 0 10rpx;
		}
	}

	.activity-statistics {
		display: flex;
		background: $theme-color;
		padding: 40rpx 0;
		color: #FFFFFF;
		border-radius: 12rpx;
		text-align: center;
		margin: 40rpx 0;

		view {
			flex: 0.5;
		}
	}

	.activity-time {
		color: #616161;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.question-tip {
		text-indent: 2em;
		line-height: 1.5;
		color: #A3A3A3;
	}

	.question-form {
		margin: 20rpx 0;
		border: 1rpx solid rgba(0, 0, 0, 0.2);
		padding: 20rpx;
	}

	.question-form-item {
		view {
			padding: 10rpx 0;

			.question-form-title {
				display: flex;
			}
		}

	}

	.question-form-label {
		padding: 20rpx 20rpx 10rpx 0;
		color: #585858;
		font-size: .8em;
		height: 70rpx;
		line-height: 70rpx;
	}

	.option-across {
		display: inline-block;
	}

	.option-vertical {
		display: block;
	}

	.picker-option {
		border: 1rpx solid #eeeeee;
		padding: 0 10rpx;
	}

	.placeHolder {
		color: #999999;
	}

	.rate-tip {
		margin-left: 20rpx;
		color: #A3A3A3;
		font-size: .8em;
	}

	.textarea-content {
		width: 100%;
		color: #A3A3A3;
		font-size: .8em;
		border: 1rpx solid #eeeeee;
		padding: 20rpx;
		margin-top: 10rpx;
	}

	.other {
		display: flex;
		align-items: center;
	}

	.btn-submit {
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background: $theme-color;
		border-radius: 13rpx;
		color: #FFFFFF;
		margin: 40rpx 0;

	}

	.disabled-btn {
		background: #B5B5B5;
	}
</style>
